<template>
  <a-row>
    <a-col :flex="1">
      <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item field="trueName" label="姓名">
              <a-input v-model="formModel.trueName" placeholder="请输入姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="mobile" label="手机号">
              <a-input v-model="formModel.mobile" placeholder="请输入手机号" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="sex" label="性别">
              <a-select v-model="formModel.sex" :options="sexOptions" placeholder="请选择" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="email" label="邮箱">
              <a-input v-model="formModel.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="status" label="状态">
              <a-select v-model="formModel.status" :options="statusOptions" placeholder="请选择" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-col>
    <a-divider style="height: 84px" direction="vertical" />
    <a-col :flex="'86px'" style="text-align: right">
      <a-space direction="vertical" :size="18">
        <a-button type="primary" @click="handleSearch">
          <template #icon>
            <icon-search />
          </template>
          {{ $t('searchTable.form.search') }}
        </a-button>
        <a-button @click="handleReset">
          <template #icon>
            <icon-refresh />
          </template>
          {{ $t('searchTable.form.reset') }}
        </a-button>
      </a-space>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface'

const { t } = useI18n()

// 定义表单模型类型
interface FormModel {
  trueName: string
  mobile: string
  sex: boolean | string
  status: boolean | string
  email: string
}

// 定义组件属性
const props = defineProps<{
  modelValue: FormModel
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:modelValue', value: FormModel): void
  (e: 'search'): void
  (e: 'reset'): void
}>()

// 创建本地表单模型的引用，与父组件的数据双向绑定
const formModel = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

// 性别选项
const sexOptions = computed<SelectOptionData[]>(() => [
  {
    label: '男',
    value: true,
  },
  {
    label: '女',
    value: false,
  },
])

// 状态选项
const statusOptions = computed<SelectOptionData[]>(() => [
  {
    label: '启用',
    value: true,
  },
  {
    label: '禁用',
    value: false,
  },
])

// 处理搜索按钮点击
const handleSearch = () => {
  emit('search')
}

// 处理重置按钮点击
const handleReset = () => {
  emit('reset')
}
</script>

<style scoped lang="less">
// 组件特定样式可以在这里添加
</style>
